quickSettings: Add QuickMenuToggle

This is a convenience subclass for a quick toggle with a menu.

The menu can be disabled dynamically and if enabled, an arrow
is displayed that allows opening the menu.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2393>

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 4f8a62f2756a88c365cdeee67209d1e066a52024..f1f2eb235e1d25eff28dda3405af6094000ef328 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -17,8 +17,26 @@
 
   & > StBoxLayout { spacing: $base_padding; }
 
+  /* Move padding into the box; this is to allow menu arrows
+     to extend to the border */
+  &.button { padding: 0; }
+  & > StBoxLayout { padding: 0 2 * $base_padding; }
+
   .quick-toggle-label { font-weight: bold; }
-  .quick-toggle-icon { icon-size: $base_icon_size; }
+  .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
+}
+
+.quick-menu-toggle {
+  &:ltr > StBoxLayout { padding-right: 0; }
+  &:rtl > StBoxLayout { padding-left: 0; }
+
+  & .quick-toggle-arrow {
+    background-color: transparentize($fg_color, 0.9);
+    padding: 8px;
+
+    &:ltr { border-radius: 0 99px 99px 0; }
+    &:rtl { border-radius: 99px 0 0 99px; }
+  }
 }
 
 .quick-toggle-menu {

diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index 634a0703f9b0895a97da5779ed89f633c4b5b718..ecffc98791b9ff5fee6b04bc5550b7608d9b2af0 100644 (file)
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -1,4 +1,4 @@
-/* exported QuickToggle, QuickSettingsMenu, SystemIndicator */
+/* exported QuickToggle, QuickMenuToggle, QuickSettingsMenu, SystemIndicator */
 const {Atk, Clutter, Gio, GLib, GObject, Graphene, Pango, St} = imports.gi;
 
 const Main = imports.ui.main;
@@ -94,6 +94,43 @@ var QuickToggle = GObject.registerClass({
     }
 });
 
+var QuickMenuToggle = GObject.registerClass({
+    Properties: {
+        'menu-enabled': GObject.ParamSpec.boolean(
+            'menu-enabled', '', '',
+            GObject.ParamFlags.READWRITE,
+            true),
+    },
+}, class QuickMenuToggle extends QuickToggle {
+    _init(params) {
+        super._init({
+            ...params,
+            hasMenu: true,
+        });
+
+        this.add_style_class_name('quick-menu-toggle');
+
+        this._menuButton = new St.Button({
+            child: new St.Icon({
+                style_class: 'quick-toggle-arrow',
+                icon_name: 'go-next-symbolic',
+            }),
+            x_expand: false,
+            y_expand: true,
+        });
+        this._box.add_child(this._menuButton);
+
+        this.bind_property('menu-enabled',
+            this._menuButton, 'visible',
+            GObject.BindingFlags.DEFAULT);
+        this._menuButton.connect('clicked', () => this.menu.open());
+        this.connect('popup-menu', () => {
+            if (this.menuEnabled)
+                this.menu.open();
+        });
+    }
+});
+
 class QuickToggleMenu extends PopupMenu.PopupMenuBase {
     constructor(sourceActor) {
         super(sourceActor, 'quick-toggle-menu');